<!DOCTYPE html>
<html>
<head>

<style type="text/css">
body{
	background-image: url(assets/images/core/bg/paper.png);
}
.left-side{
	height: 126px;
	overflow-x: scroll;
	overflow-y:hidden;
	background: #FAFAFA;
}

.left-side table #td-last{

}
.left-side table img{
	width: 140px;
	height: 90px;
	border: 2px solid #3498db;
	padding:3px;
	cursor: pointer;
	border-radius:3px;
}
.left-side table img.active{
	border: 2px solid #e67e22;
	padding:5px;
	width: 142px;
	height: 92px;
}
.left-side table img.done{
	border: 2px solid #27ae60;
}
.right-side{
	padding-top: 10px;
}
.right-side .iframe-image{
	width: 100%;
}
.hidden{
	display: none;
}
#loading{
	height: 100%;
	text-align: center;
}
#loading img{
	width: 114px;
	background: rgba(0,0,0,0.2);
	padding: 10px;
	border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
}
</style>

</head>
<body>
<script type="text/javascript">
	function resizeIframe(obj) {
		if(obj.contentWindow){
			obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
		}
		else{
			contentDocument
			obj.style.height = obj.contentDocument.body.scrollHeight + 'px';
		}
	  		
	}
</script>

<div class="content">
	<div class="left-side">
	<table>
	<tr>
	<?php foreach ($slides as $k=>$image):?>
		<td>
			<img src="<?= base_url(IMAGE_PATH.$image['code'])?>" 
				 title="<?= $image['title']?>" 
				 alt="<?= $image['title']?>"
				 data-slide-id="<?=$k?>"
				 
			>
		</td>
	<?php endforeach;?>
	</tr>
	</table>
	</div>
	<div class="right-side">
		<?php foreach ($slides as  $k => $image):?>
		
			<iframe id="slide_<?=$k?>" 
					data-src="<?= base_url('image_map/image'). '?id='.$image['id'].'&img='.urlencode( $image['code'] ) ?>"
					frameBorder="0" 
					class="iframe-image <?php echo ($k === 0)?"":"hidden" ?>"
					onload="resizeIframe(this);" id="" >
			</iframe>
		<?php endforeach;?>
		<div id="loading" class="hidden">
			<img src="<?=base_url('assets/images/load_3.gif')?>" src="Loading...">
			<h3>Loading...</h3>
		</div>
	</div>
	
</div>
<?php  echo js("js/libs/jquery-1.11.0")?>
<script type="text/javascript">
	$('.left-side table img').click(function(){
		if($(this).hasClass('active') ){
			return;
		}
		
		$('.left-side table img').removeClass('active');
		$(this).addClass('active');
		
		var slide_id = 'slide_' + $(this).data('slide-id');
		$('.right-side .iframe-image').hide();
		
		
		var $frame = $('#'+slide_id );
		
		if(! $frame.attr("src") ){
			
			$frame.attr("src" , $frame.data('src') );
			$('.right-side #loading').show();
			$frame.load(function(){
				$('.right-side #loading').hide();
				$frame.show();
			});
			return;
		}
		
		$frame.show();
		
		
	});
</script>
</body>
</html>